<template>
  <div class="shebei_middle">
    <!--        设备概览-->
    <el-card class="box-card middle_left">
      <div slot="header" class="clearfix">
        <span>设备概览</span>
        <el-tooltip content="统计****" placement="bottom" effect="light">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
        <el-button style="float: right; padding: 3px 0" type="text">绑定设备</el-button>
      </div>
      <div class="zhonxia">
        <img src="../assets/img/gateway.png" alt="" class="img1">
        <div class="line"></div>
        <div>
          <div class="num">{{ deviceobj.LoRaWAN.total }}</div>
          <div>LoRaWAN</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div>
          <div class="num">{{ deviceobj.LoRaPP.total }}</div>
          <div>LoRaPP</div>
          <div>网关</div>
        </div>
        <div class="line"></div>
        <div>
          <div class="num">{{ deviceobj.group }}</div>
          <div>&nbsp;&nbsp;&nbsp;</div>
          <div>群组</div>
        </div>
        <div class="line1"></div>
        <i class="iconfont icon-yalichuanganqi img2"></i>
        <div>
          <div class="num">{{ deviceobj.sensor.total }}</div>
          <div>传感器节点</div>
        </div>
      </div>
    </el-card>
    <!--      监控-->
    <el-card class="box-card middle_middle">
      <div slot="header" class="clearfix">
        <span>监控</span>
        <el-tooltip content="监控****" placement="bottom" effect="light">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
      </div>
      <div>
        <div class="low">
          <span>网关离线</span>
          <span class="s1">{{ deviceobj.LoRaWAN.offline + deviceobj.LoRaPP.offline}}</span>
        </div>
        <div class="low">
          <span>节点离线</span>
          <span class="s1">{{deviceobj.sensor.offline}}</span>
        </div>
        <div class="low">
          <span>传感器低电量</span>
          <span class="s2">{{deviceobj.sensor.lowBattery}}</span>
        </div>
      </div>
    </el-card>
    <!--      公告-->
    <el-card class="box-card middle_right" v-if="flag">
      <div slot="header" class="clearfix">
        <span>公告</span>
        <el-tooltip content="公告****" placement="bottom" effect="light">
          <i class="iconfont icon-askoutline"></i>
        </el-tooltip>
      </div>
      <div>
        <div class="la">
          <i class="iconfont">&#xe8c9;</i>
          <span>sen seCAP V3.02020-02-13 14:28:07</span>
        </div>
        <div class="la">
          <i class="iconfont">&#xe8c9;</i>
          <span>sen seCAP V3.02020-02-13 14:28:07</span>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {$deviceCount} from "@/api";

export default {
  name: "gailan",
  props:["flag"],
  data() {
    return {
      deviceobj: {
        LoRaPP: "",
        LoRaWAN: "",
        group: "",
        sensor: ""
      },
    }
  },
  mounted() {
    $deviceCount().then(res => {
      /*console.log(res.data.data);*/
      this.deviceobj = res.data.data;
    });

  }
}
</script>

<style scoped lang="scss">
.shebei_middle {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.shebei_middle .middle_left {
  flex-grow: 1;
  height: 100%;
  background: white;

  .zhonxia {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 14px;
  }

  .num {
    font-size: 20px;
  }

  .line1 {
    width: 2px;
    height: 80px;
    background: #e9eef6;
  }

  .line {
    width: 2px;
    height: 40px;
    background: #e9eef6;
  }

  .zhonxia .img1 {
    width: 40px;
    height: 70px;
  }

  .zhonxia .img2 {
    font-size: 40px;
    color: #91a8bf;
    transform: rotate(180deg);
  }
}

.shebei_middle .middle_middle {
  width: 23%;
  background: white;
  margin-left: 10px;
  .low{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-weight: bold;
    font-size: 14px;
    .s1{
      width: 40px;
      color: #6b8c4b;
      background: #ddf0e0;
      border-radius: 10px;
      display: inline-block;
      text-align: center;
    }
    .s2{
      width: 40px;
      color: #ec464e;
      background: #fbdadb;
      border-radius: 10px;
      display: inline-block;
      text-align: center;
    }
  }
}

.shebei_middle .middle_right {
  margin-left: 10px;
  width: 23%;
  background: white;
  .la{
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 12px;
    i{
      color: #7edc7c;
    }
  }
}
</style>